<template>
	<view class="store-page">
		<!-- <nav-bar title="在找车详情" :showLeftIcon="true" :leftSlot="false"></nav-bar> -->
		<scroll-view class="content-box" scroll-y>
			<view class="layout demandDetails">
				<view class="title">
					<text>需求详情</text>
				</view>
				<view>
					<text>南京 江宁</text>
					<image style="height: 8rpx;width: 35rpx;" src="@/static/images/mine/to.png" mode="widthFix">
					</image>
					<text> 徐州 铜山</text>
				</view>
				<text>轿车 / 1台 / 能正常行驶</text>
				<text>托运日期:2024-09-07
					<text>（明天）</text>
				</text>
				<view>
					<text>当前联系次数</text>
					<text>23次</text>
				</view>
				<view>
					<text>车辆名称:</text>
					<text>XXXXXXXX</text>
				</view>
				<view>
					<text>车辆估值:</text>
					<text>10万</text>
				</view>
				<view>
					<text>此需求截至日期</text>
					<text>2024/09/01</text>
				</view>
				<view>
					<text>备注</text>
					<text>这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注</text>
				</view>
			</view>
			<view class="layout offerList">
				<view class="title">
					<text>报价列表</text>
					<view>
						<text>
							查看全部</text>
						<image style="height: 40rpx;width: 40rpx;" src="@/static/images/mine/enter.png"
							mode="widthFix">
					</view>
				</view>
				<view v-for="(item,index) in 3" :key="index" class="item-list">
					<view>
						<text>北京拖车车物流有限公司</text>
						<text>1800元</text>
					</view>
					<text>预计到达时间:2024/09/13</text>
				</view>
			</view>
			<view class="layout offerList">
				<view class="title">
					<text>联系列表</text>
					<view>
						<text>
							查看全部</text>
						<image style="height: 40rpx;width: 40rpx;" src="@/static/images/mine/enter.png"
							mode="widthFix">
					</view>
				</view>
				<view v-for="(item,index) in 3" :key="index" class="item-list">
					<view>
						<text>XX物流公司</text>
						<text>点击回拨</text>
					</view>
					<text>拨打时间:2024/09/13</text>
				</view>
			</view>
		</scroll-view>

		<!-- <you-tabs :activeName="tabActive" :tabsList="tabsList" @tabClick="clickTabItem" :showMoreTab="true"></you-tabs> -->
		<!-- 	<you-scroll 
			:loadingHeight="loadingHeight" 
			:mainHeight="scrollHeight" 
			:isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" 
			@onRefresh="onRefresh" 
			@loadMore="loadMore">
			<template>
				
			</template>
		</you-scroll> -->
		<you-bottom-btn :btnConfig="bottomBtnConfig" @clickSubmit="clickSubmit"></you-bottom-btn>
	</view>
</template>

<script>
	import {
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	export default {
		name: 'Store',
		components: {},
		data() {
			return {
				loadingHeight: '',
				scrollHeight: '',
				bottomBtnConfig: [{
					text: '下架信息',
					class: 'confirm',
					funcName: 'clickSubmit'
				}],
			}
		},

		async onLoad() {
			this.scrollHeight = this.$store.getters.heightData.mainHeight - 48;
			this.loadingHeight = this.$store.getters.heightData.mainHeight - 68;

		},
		async onShow() {

		},
		methods: {}
	}
</script>
<style lang="scss" scoped>
	.content-box {
		max-height: calc(100vh - 188rpx);
		height: calc(100vh - 188rpx);
		padding: 30rpx;
		padding-top: 0;

		.demandDetails {
			>view {
				&:nth-of-type(2) {
					font-family: "PingFang SC";
					font-size: 30rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
					display: flex;
					align-items: center;

					image {
						margin: 0 12rpx;
					}
				}


				&:nth-of-type(3),
				&:nth-of-type(4),
				&:nth-of-type(5),
				&:nth-of-type(6) {
					display: flex;
					justify-content: space-between;
					margin: 16rpx 0;
					font-size: 28rpx;

					text {
						&:nth-of-type(1) {
							opacity: 0.6;
						}

						&:nth-of-type(2) {
							opacity: 0.9;
						}
					}
				}

				&:nth-of-type(3) {
					margin-top: 20rpx;

					text {
						opacity: 1 !important;
						color: #1777FF;
					}
				}

				&:last-child {
					text {
						&:nth-of-type(1) {
							display: block;
							font-size: 28rpx;
							opacity: 0.6;
						}

						&:nth-of-type(2) {
							font-size: 24rpx;
							opacity: 0.9;
							line-height: normal;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
						}
					}
				}
			}

			>text {
				display: block;

				&:nth-of-type(1) {
					color: #ff7512;
					font-family: "PingFang SC";
					font-size: 26rpx;
					margin: 16rpx 0;
				}

				&:nth-of-type(2) {
					color: #737373;
					margin-bottom: 10rpx;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;

					text {
						color: #1777ff;
					}
				}
			}
		}

		.offerList{
			.item-list{
				margin-bottom: 30rpx;
				>view{
					margin-bottom: 16rpx;
					display: flex;
					justify-content: space-between;
					text{
						&:nth-of-type(1){
							 color: #000000;
							 font-family: "PingFang SC";
							 font-size: 28rpx;
							 font-style: normal;
							 font-weight: 400;
							 opacity: 0.9;
						}
						&:nth-of-type(2){
							 color: #1777ff;
							  text-align: right;
							  font-family: "PingFang SC";
							  font-size: 28rpx;
							  font-style: normal;
							  font-weight: 500;
						}
					}
				}
				>text{
					 font-family: "PingFang SC";
					 font-size: 24rpx;
					 font-style: normal;
					 font-weight: 400;
					 line-height: normal;
					 opacity: 0.5;
				}
				
				&:last-child{
					margin: 0;
					view{
						margin: 0;
					}
				}
			}
		}
		
		.layout {
			margin-top: 20rpx;
			padding: 20rpx 24rpx;
			background: #ffffff;
			border-radius: 12rpx;

			.title {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 10rpx;
				margin-bottom: 20rpx;

				>text {
					font-weight: 550;
				}

				>view {
					display: flex;
					align-items: center;
					text{
						opacity: 0.6;
						font-size: 24rpx;
					}
				}

				&::after {
					position: absolute;
					left: 0;
					top: calc(50% - 12rpx);
					content: '';
					display: inline-block;
					width: 4rpx;
					height: 24rpx;
					background: #1777ff;
				}
			}
		}
	}
</style>